import { Button, Form, Input, message } from 'antd'
import type { FC, ReactNode } from 'react'
import React, { memo } from 'react'
import { useMyDispatch } from '@/store'
import {
  changeCurrentAccountAction,
  verifyAccountAction
} from '@/store/module/forget-pwd'

interface IProps {
  children?: ReactNode
  nextStepClick: (step: number) => void
}

const ConfirmAccount: FC<IProps> = (props) => {
  const dispatch = useMyDispatch()

  function onFinish(values: any) {
    const { account } = values
    const { nextStepClick } = props

    dispatch(verifyAccountAction(account)).then(({ payload: isSuccess }) => {
      if (!isSuccess) {
        message.error('信息不存在!')
        return
      }
      // 验证通过执行下一步
      dispatch(changeCurrentAccountAction(account))
      nextStepClick(1)
    })
  }

  return (
    <div>
      <Form style={{ width: '100%' }} onFinish={onFinish}>
        <Form.Item name="account">
          <Input size="large" placeholder="请输入账号/手机号" />
        </Form.Item>
        <Form.Item>
          <Button
            size="large"
            type="primary"
            style={{ width: '100%' }}
            htmlType="submit"
          >
            下一步
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default memo(ConfirmAccount)
